import React,{ useState, useCallback } from 'react'

/**
 * useCallback
 */

import Hello from './components/Hello'

export default function LayOut() {
  const [count, setCount] = useState(0)
  const [price] = useState(50)
 
  function total() {
    console.log("total")    
    /**
     * 没有使用 useCallback，把这个函数传过子组件，
     * 每次改动 count，这行代码就会重新执行
     */
  }
  return (
    <div>
        LayOut

        <button onClick={() => {setCount(a => ++a)}} > +1 </button>
        <div>count的值：{count}</div>
        {/* hello 组件不要随意渲染 */}
        <Hello total={total} />
    </div>
  )
}
